<template>
  <div class="preview-wrap-main">
    <!-- 头部 -->
    <div
      class="preview-container-head"
      :style="
        diyData.page?.title?.style?.opacity == '1'
          ? ''
          : { backgroundColor: diyData.page?.title?.style?.bg }
      "
    >
      <div
        class="preview-header-title-box"
        :style="{ color: diyData.page?.title?.style?.color }"
      >
        <template
          v-if="
            diyData.page?.temp?.value == 2 || diyData.page?.temp?.value == 3
          "
        >
          <div
            class="preview-header-title-img"
            :style="{
              backgroundImage: 'url(' + diyData.page.title.style.img + ')',
            }"
          ></div>
        </template>
        <template v-if="diyData.page?.temp?.value !== 3">
          <div
            class="preview-header-title-text"
            :class="
              diyData.page?.temp?.value == 1
                ? diyData.page?.title?.style?.position
                : diyData.page?.temp?.value == 2
                ? 'left'
                : ''
            "
          >
            {{ diyData.page?.title?.text }}
          </div>
        </template>
        <template v-if="diyData.page?.temp?.value == 3">
          <div class="preview-header-search-box">
            <div
              class="preview-header-search-box-bg"
              :style="{
                background: diyData.page.title.style.search_bg,
                opacity: diyData.page.title.style.search_opacity + '%',
              }"
            ></div>
            <span class="icon icon-sousuo mr5"></span>
            <span>搜索</span>
          </div>
        </template>
      </div>
    </div>
    <div class="preview-wrap-body">
      <div class="preview-wrap-content" :style="stylesBody">
        <draggable v-model="diyData.items" item-key="index">
          <template #item="{ element, index }">
            <template v-if="element.type == 'pop_adv'">
              <!-- diy元素: 广告弹窗 -->
              <storeDiyPreviewPopAdv
                :diyItem="element"
                :index="index"
                :selected="index === selectedIndex"
              ></storeDiyPreviewPopAdv>
            </template>
            <div
              v-else
              class="preview-optional"
              :class="{ selected: index === selectedIndex }"
              @click.stop="onEditer(index)"
            >
              <template v-if="element.type == 'goods'">
                <!-- diy元素: 商品列表 -->
                <storeDiyPreviewGoods
                  :diyItem="element"
                  :index="index"
                ></storeDiyPreviewGoods>
              </template>
              <template v-if="element.type == 'window'">
                <!-- diy元素: 魔方 -->
                <storeDiyPreviewWindow
                  :diyItem="element"
                  :index="index"
                ></storeDiyPreviewWindow>
              </template>
              <template v-if="element.type == 'single'">
                <!-- diy元素: 单图 -->
                <storeDiyPreviewSingle
                  :diyItem="element"
                  :index="index"
                ></storeDiyPreviewSingle>
              </template>
              <template v-if="element.type == 'banner'">
                <!-- diy元素: 图片轮播 -->
                <storeDiyPreviewBanner
                  :diyItem="element"
                  :index="index"
                ></storeDiyPreviewBanner>
              </template>
              <template v-if="element.type == 'title'">
                <!-- diy元素: 标题栏 -->
                <storeDiyPreviewTitle
                  :diyItem="element"
                  :index="index"
                ></storeDiyPreviewTitle>
              </template>
              <template v-if="element.type == 'notice'">
                <!-- diy元素: 公告 -->
                <storeDiyPreviewNotice
                  :diyItem="element"
                  :index="index"
                ></storeDiyPreviewNotice>
              </template>
              <template v-if="element.type == 'nav_bar'">
                <!-- diy元素: 图文导航 -->
                <storeDiyPreviewNavBar
                  :diyItem="element"
                  :index="index"
                ></storeDiyPreviewNavBar>
              </template>
              <template v-if="element.type == 'search'">
                <!-- diy元素: 搜索 -->
                <storeDiyPreviewSearch
                  :diyItem="element"
                  :index="index"
                ></storeDiyPreviewSearch>
              </template>
              <template v-if="element.type == 'guide'">
                <!-- diy元素: 辅助线 -->
                <storeDiyPreviewGuide
                  :diyItem="element"
                  :index="index"
                ></storeDiyPreviewGuide>
              </template>
              <template v-if="element.type == 'user'">
                <!-- diy元素: 个人中心 -->
                <storeDiyPreviewUser
                  :diyItem="element"
                  :index="index"
                ></storeDiyPreviewUser>
              </template>

              <template v-if="element.type == 'order'">
                <!-- diy元素: 我的订单 -->
                <storeDiyPreviewOrder
                  :diyItem="element"
                  :index="index"
                ></storeDiyPreviewOrder>
              </template>

              <div
                class="preview-optional-widget"
                v-if="index === selectedIndex"
              >
                <div class="icon icon-cuo" @click="onDeleleItem"></div>
              </div>
              <div class="preview-optional-comp">{{ element.name }}</div>
            </div>
          </template>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import draggable from "vuedraggable";
export default defineComponent({
  name: "storeDiyPreview",
  components: {
    draggable,
  },
});
</script>
<script lang="ts" setup>
import { watch, computed, StyleValue, getCurrentInstance } from "vue";

import storeDiyPreviewPopAdv from "./pop_adv.vue";
import storeDiyPreviewWindow from "./window.vue";
import storeDiyPreviewSingle from "./single.vue";
import storeDiyPreviewGuide from "./guide.vue";
import storeDiyPreviewBanner from "./banner.vue";
import storeDiyPreviewTitle from "./title.vue";
import storeDiyPreviewNotice from "./notice.vue";
import storeDiyPreviewNavBar from "./nav-bar.vue";
import storeDiyPreviewSearch from "./search.vue";
import storeDiyPreviewGoods from "./goods.vue";
import storeDiyPreviewUser from "./user.vue";
import storeDiyPreviewOrder from "./order.vue";

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    diyData?: any;
    selectedIndex: number | string;
  }>(),
  {
    diyData: {},
    selectedIndex: 0,
  }
);

const stylesBody = computed<StyleValue>(() => {
  return {
    backgroundColor: props.diyData?.page?.style?.bg,
    backgroundImage:
      props.diyData?.page?.style?.img_status == 1
        ? `url(${props.diyData?.page?.style?.img})`
        : "",
  };
});

const emit = defineEmits(["onEditer", "onDeleleItem"]);

/**
 * 编辑当前选中的Diy元素
 */
const onEditer = (index: string | number) => {
  emit("onEditer", index);
};
const onDeleleItem = () => {
  emit("onDeleleItem", props.selectedIndex);
};
// 监听键盘
const keydownEvent = () => {
  document.onkeydown = (e: any) => {
    if (e.defaultPrevented) {
      return;
    }
    //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
    //左
    if (e && e.keyCode == 38) {
      if (props.selectedIndex > 0) {
        emit("onEditer", Number(props.selectedIndex) - 1);
      } else {
        $utils.errorMsg("请点击需要编辑层级");
      }
      // 按下左箭头
    } else if (e && e.keyCode == 40) {
      // 按下右箭头
      if (props.diyData.items.length > props.selectedIndex) {
        emit("onEditer", Number(props.selectedIndex) + 1);
      } else {
        $utils.errorMsg("请点击需要编辑层级");
      }
    }
  };
};

// watch(
//   () => props.diyData,
//   (val) => {
//     console.log(val);
//   },
//   { deep: true }
// );

onMounted(() => {
  keydownEvent();
});
</script>


<style scoped>
.preview-wrap-main {
  width: 360px;
  height: calc(100% - 2px);
  font-size: 12px;
  box-sizing: none;
  position: relative;
  border: 1px solid var(--el-border-color);
}
.preview-wrap-body {
  width: 800px;
  height: calc(100% - 40px);
  position: relative;
  z-index: 3;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-left: calc(180px - 400px);
  display: flex;
  justify-content: center;
}
.preview-wrap-content {
  width: 360px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: fit-content;
  min-height: 100%;
  position: relative;
}
.preview-wrap-body::-webkit-scrollbar {
  display: none;
}
.preview-wrap-main .preview-container-head {
  width: 340px;
  height: 40px;
  text-align: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
  padding: 0 10px;
}
.preview-wrap-main .preview-container-head .preview-header-title-box {
  width: calc(100% - 20px);
  position: absolute;
  left: 10px;
  bottom: 6px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  display: flex;
}
.preview-wrap-main
  .preview-container-head
  .preview-header-title-box
  .preview-header-title-text {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-wrap-main
  .preview-container-head
  .preview-header-title-box
  .preview-header-title-text.center {
  width: 100%;
  text-align: center;
}
.preview-wrap-main
  .preview-container-head
  .preview-header-title-box
  .preview-header-title-text.left {
  width: 100%;
  text-align: left;
}

.preview-wrap-main
  .preview-container-head
  .preview-header-title-box
  .preview-header-title-img {
  width: 85px;
  margin-right: 10px;
  height: 28px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
}

.preview-wrap-main
  .preview-container-head
  .preview-header-title-box
  .preview-header-search-box {
  height: 28px;
  line-height: 28px;
  width: 120px;
  display: flex;
  padding: 0 10px;
  border-radius: 28px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.preview-wrap-main
  .preview-container-head
  .preview-header-title-box
  .preview-header-search-box
  .preview-header-search-box-bg {
  position: absolute;
  height: 28px;
  left: 0;
  width: 120px;
  border-radius: 28px;
  z-index: -1;
}

.preview-wrap-body .preview-optional {
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.preview-wrap-body .preview-optional.selected::after {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 2px solid var(--base-default);
  cursor: move;
  z-index: 99;
  box-shadow: 0 1px 4px var(--el-color-primary-light-5);
}
.preview-wrap-body .preview-optional:hover::before {
  position: absolute;
  content: "";

  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 2px dashed var(--base-default);
  cursor: move;
  z-index: 1;
}
.preview-optional-widget {
  position: absolute;
  top: 0px;
  right: -16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 2px;
  font-size: 12px;
  text-align: center;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
}
.preview-optional-widget .icon {
  font-size: 12px;
}
.preview-wrap-body .preview-optional-comp {
  position: absolute;
  left: -90px;
  min-width: 70px;
  min-height: 20px;
  padding: 4px 7px;
  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
  box-sizing: border-box;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  background: #fff;
  border-radius: 2px;
  top: 0;
  cursor: pointer;
}
.preview-wrap-body .preview-optional-comp:hover {
}
</style>


<style>
.style-shade {
  box-shadow: 0 4px 10px rgb(47 54 70 / 20%);
}
</style>